<template>
  <div class="qualica">
    <p class="title">资质证件</p>
    <ul class="qualica_list">
      <li v-for="img in list" :key="img.supplierQualificationId">
        <el-image class="img" :src="img.qualificationImg" :preview-src-list="[img.qualificationImg]"> </el-image>
        <p class="text">{{ consts.SupplierQualificationType[img.qualificationType] }}</p>
        <p class="time" v-if="img.effectiveDate">{{ img.effectiveDate }} - {{ img.expiredDate }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup>
import consts from '@/consts'

defineProps(['list'])
</script>
<style scoped lang="scss">
.qualica {
  background-color: #fff;
  padding: 20px 0 20px 20px;
  margin-top: 10px;

  .title {
    line-height: 20px;
    font-weight: 500;
    font-size: 16px;
  }

  .qualica_list {
    display: flex;
    padding: 20px 0 0 110px;

    li {
      display: flex;
      flex-direction: column;
      align-items: center;

      color: var(--color-text);
      margin: 0 20px;

      .img {
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
